<template>
    <el-form  :model="ruleFrom" label-width="110px">
        <!-- 规则详情1 -->
        <vab-card>
            <template #header>
            <div class="flex leve2_title">
                规则详情-满金额折扣
            </div>
            </template>
            <template #default>
                <el-row :gutter="24">
                    <el-col v-bind="colLay">
                        <el-form-item label="有效金额范围:">
                            订单总金额
                        </el-form-item>
                    </el-col>
                    <el-col v-bind="colLay">
                        <el-form-item label="金额范围">
                            <VabRangeForm class="width_100"/>
                        </el-form-item>
                    </el-col>
                    <el-col v-bind="colLay">
                        <el-form-item label="订单折扣">
                            <VabInputForm class="width_100"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>
        </vab-card>
        <!-- 规则详情2 -->
        <vab-card>
            <template #header>
            <div class="flex leve2_title">
                规则详情-满数量折扣
            </div>
            </template>
            <template #default>
                <el-row :gutter="24">
                    <el-col v-bind="colLay">
                        <el-form-item label="有效数量范围:">
                            计价总数量
                        </el-form-item>
                    </el-col>
                    <el-col v-bind="colLay">
                        <el-form-item label="数量范围">
                            <VabRangeForm class="width_100"/>
                        </el-form-item>
                    </el-col>
                    <el-col v-bind="colLay">
                        <el-form-item label="订单折扣">
                            <VabInputForm class="width_100"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>
        </vab-card>
        <!-- 规则详情2 -->
        <vab-card>
            <template #header>
            <div class="flex leve2_title">
                规则详情-满金额+数量折扣
            </div>
            </template>
            <template #default>
                <el-row :gutter="24">
                    <el-col v-bind="colLay">
                        <el-form-item label="有效金额范围:" style="margin-right: 4px;">
                            订单总金额
                        </el-form-item>
                        <el-form-item label="有效数量范围:">
                            计价总数量
                        </el-form-item>
                    </el-col>
                    <el-col v-bind="colLay">
                        <el-form-item label="金额范围">
                            <VabRangeForm class="width_100"/>
                        </el-form-item>
                    </el-col>
                    <el-col v-bind="colLay">
                        <el-form-item label="数量范围">
                            <VabRangeForm class="width_100"/>
                        </el-form-item>
                    </el-col>
                    <el-col v-bind="colLay">
                        <el-form-item label="订单折扣">
                            <VabInputForm class="width_100"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>
        </vab-card>
    </el-form>
</template>

<script setup lang="ts">
/**
 * @var
 */

const colLay = {
    xs: 12, sm: 12, md: 12, lg: 8, xl: 8,
}

const ruleFrom = ref<any>({})

</script>

<style lang="scss" scoped>
@import url(./give.scss);

:deep() {
    .el-form-item {
        margin-bottom: 4px;
    }

    .el-form-item__label {
        color: #a9a9a9;
        font-size: 14px;
    }
}
</style>